<template>
  <div class="srFM">
    <div class="nav">
      <span
        class="iconfont icon-arrow-left-bold"
        @click="$router.go(-1)"
      ></span>
      <span class="title">歌单广场</span>
    </div>
    <van-tabs @click="getList" background="transparent">
      <van-tab title="推荐">
        <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in tuijiang" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id" >
              <div class="img"><img :src="item.picUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="轻音乐">
         <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="影视原声">
         <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="另类/独立">
         <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="华语">  
        <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="流行">
         <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="电子">
         <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="民谣">
         <van-grid :border="false" :column-num="3" :gutter="8">
          <van-grid-item v-for="item in hy" :key="item.id">
            <router-link class="item-box"  tag="div"
            :to="'/rankItem?id=' + item.id">
              <div class="img"><img :src="item.coverImgUrl" alt=""></div>
              <div class="text">{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {  getRemLists,getGdList} from "../api/recommend";
export default {
  data(){
    return{
      tuijiang:null,
      hy:null
    }
  },
  methods:{
  getList(name, title){
    // getGdList
    console.log(name,title)
    getGdList({
      limit:30,
      cat:title,
    }).then(data=>{
      this.hy=data.playlists;
      console.log(this.hy)
    })
  }   
  },
  created(){
    getRemLists().then((data) => {
      console.log(data.result);
      this.tuijiang = data.result;
    });

  }
};
</script>

<style lang="less">
.srFM {
  background-image: linear-gradient(#ebedf0, #fff);
  padding-bottom: 55px;
  .nav {
    .iconfont {
      font-size: 18px;
    }
    .title {
      font-size: 18px;
      font-weight: 400;
      padding: 0 10px;
    }
  }
  .item-box {
    text-align: center;
    .img {
      width: 88px;
      height: 88px;
      //   border: 1px solid black;
      overflow: hidden;
      background-color: red;
      border-radius: 7px;
      img{
        width: 100%;
      }
    }
    .text {
      width: 88px; /*限制元素宽度*/
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis;
      display: -webkit-box; /*盒子模型微弹性伸缩模型*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
      -webkit-line-clamp: 2; /*文本显示3行*/
      font-size: 14px;
      color: rgb(124, 118, 118);
    }
  }
  .van-grid-item__content{
    background-color: transparent;
  }
}
</style>